<template>
  <div class="page">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <b>预检打印申报书</b>
      </div>
      <div class="group_item">
        <div class="group_item_top">
          <span>操作说明</span>
        </div>
        <div class="group_item_content">
          <p>1.请务必仔细核对申报材料，“确认上传盖章申报书”后不可撤销，所有信息无法再更改；</p>
          
          <p><small>附件上传：仅支持（.pdf）格式文件，大小10m以内</small></p>
        </div>
      </div>
      <div class="group_item">
        <div class="group_item_top">
          <span>操作按钮</span>
        </div>
        
        
        <div class="group_item_content">
          
          <!-- <div v-for="(i,index) in imgGroup" :key="index" style="margin: 10px 0"> -->
          <el-upload
            class="upload-demo"
            :action="api+ '/upload/image/基本信息表'"
            :before-upload="beforeUpload"
            :on-success="uploadSuccess1"
            :limit="1"
            :file-list="fileList">
            <div class="box">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">上传基本信息表（必传）</div>
            </div>
          </el-upload>
          <el-upload
            class="upload-demo"
            :action="api+ '/upload/image/项目研究表'"
            :before-upload="beforeUpload"
            :on-success="uploadSuccess2"
            :limit="1"
            :file-list="fileList">
            <div class="box">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">上传项目研究表（必传）</div>
            </div>
          </el-upload>
          <el-upload
            class="upload-demo"
            :action="api+ '/upload/image/个人陈述表'"
            :before-upload="beforeUpload"
            :on-success="uploadSuccess3"
            :limit="1"
            :file-list="fileList">
            <div class="box">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">上传个人陈述表（必传）</div>
            </div>
            
          </el-upload>
          <el-upload
            class="upload-demo"
            :action="api+ '/upload/image/辅导教师表'"
            :before-upload="beforeUpload"
            :on-success="uploadSuccess4"
            :limit="1"
            :file-list="fileList">
            <div class="box">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">上传辅导教师表（必传）</div>
            </div>
            
          </el-upload>
          <el-upload
            class="upload-demo"
            :action="api+ '/upload/image/学习成绩表'"
            :before-upload="beforeUpload"
            :on-success="uploadSuccess5"
            :limit="1"
            :file-list="fileList">
            <div class="box">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">上传学习成绩表（必传）</div>
            </div>
          </el-upload>
          <el-upload
            class="upload-demo"
            :action="api+ '/upload/image/指导专家表'"
            :before-upload="beforeUpload"
            :on-success="uploadSuccess6"
            :limit="1"
            :file-list="fileList">
            <div class="box">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">上传指导专家表（选填）</div>
            </div>
          </el-upload>
          
        <!-- </div> -->
          <el-button type="primary" size="mini" @click="save">确认上传盖章申报书</el-button>
        </div>
        <div>
          <small>注：点击“确认上传盖章申报书”后，即完成申报。申报者不可进行任何操作。</small>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  data() {
    return {
      api: process.env.API_ROOT,
      fileList: [],
      imageUrl: "",
      imgGroup: [
        {
          name: "上传作者信息表",
          type: "book1"
        },
        {
          name: "上传项目研究表",
          type: "book2"
        },
        {
          name: "上传个人陈述表",
          type: "book3"
        },
        {
          name: "上传辅导教师表",
          type: "book4"
        },
        {
          name: "上传学习成绩表",
          type: "book5"
        },
        {
          name: "上传指导专家表",
          type: "book6"
        }
      ],
      uploadForm: {
        book1: null, // 作者信息
        book2: null, // 研究项目
        book3: null, // 个人陈述
        book4: null, // 辅导教师
        book5: null, // 学习成绩
        book6: null // 指导专家
      }
    };
  },
  components: {},
  methods: {
    // 上传申报书
    save() {
      if (
        this.uploadForm.book1 === null ||
        this.uploadForm.book2 === null ||
        this.uploadForm.book3 === null ||
        this.uploadForm.book4 === null ||
        this.uploadForm.book5 === null
      ) {
        alert("有未上传文件，请确认上传文件");
        return false;
      }
      let data = this.uploadForm;
      this.$http.post("/filing/book/add", data).then(res => {
        if (res.data.message) {
          this.$message({
            message: res.data.message,
            type: "success"
          });
        } else {
          this.$message({
            message: "提交成功",
            type: "success"
          });

          setTimeout(() => {
            location.reload();
          }, 1000);
        }
      });
    },
    uploadSuccess1(response, file, fileList) {
      this.uploadForm.book1 = response.url;
    },
    uploadSuccess2(response, file, fileList) {
      this.uploadForm.book2 = response.url;
    },
    uploadSuccess3(response, file, fileList) {
      this.uploadForm.book3 = response.url;
    },
    uploadSuccess4(response, file, fileList) {
      this.uploadForm.book4 = response.url;
    },
    uploadSuccess5(response, file, fileList) {
      this.uploadForm.book5 = response.url;
    },
    uploadSuccess6(response, file, fileList) {},
    beforeUpload(file) {
      const isPDF = file.type === "application/pdf";
      const isLt10M = file.size / 1024 / 1024 < 10;
      if (!isPDF) {
        this.$message.error("上传文件只能是 PDF 格式!");
      }
      if (!isLt10M) {
        this.$message.error("上传文件大小不能超过 10MB!");
      }
      return isPDF && isLt10M;
    }
  }
};
</script>

<style scoped lang="scss">
@import "./index.scss";
.box {
  display: flex;
  margin-top: 20px;
  margin-bottom: 5px;
}
</style>
